<template>
  <div id="components-layout-demo-basic" >

    <a-layout :style="{height:heightTable,overflow:'scroll',backgroundColor:'white'}">
      <!--      页眉部分-->
      <a-layout-header>

        <div class="head_group">
          <a-button @click="back">返回</a-button>
          <a-button style="float:right;" @click="save('interview')" :disabled="isDisabled">保存</a-button>
        </div>
        <hr color="#00a0e9"/>
      </a-layout-header>

      <a-layout-content>
    <!--   -------------------------------第一行---------------------------     -->
        <a-form-model
          ref="interview"
          :model="interview"
          :rules="rules">
          <a-row>
            <a-col :span="12">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="面试岗位"
                prop="interviewPostId"
              >
<!--                <j-dict-select-tag v-model="interview.interviewPostId" placeholder="请选择岗位" dictCode="interview_post"/>-->

                <a-select v-model="interview.interviewPostId" size="large" placeholder="面试岗位" :style="widthLayout" :disabled="isDisabled">
                  <a-select-option v-for="(interviewPost,i) in interviewPostList" :value="interviewPost.id" :key="interviewPost.id">
                    {{interviewPost.name}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="面试时间"
                prop="interviewDate"
              >
                <a-date-picker size="large" v-model="interview.interviewDate" placeholder="面试时间" :style="widthLayout" :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <!--   -------------------------------上传简历---------------------------     -->
          <a-row>
            <a-col :span="12">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="上传简历"
              >
                <a-upload
                  :disabled="isDisabled"
                  name="file"
                  :multiple="false"
                  :action="BASE_API+'interview/interview/upload'"
                  :headers="headers"
                  :default-file-list="defaultFileList"
                  :before-upload="beforeUpload"
                  @change="handleChange"
                >
                  <a-button> <a-icon type="upload" /> 上传简历 </a-button>
                  <p >支持文件格式：.rar .zip .doc .pdf,单个文件不能超过2MB</p>
                </a-upload>

              </a-form-model-item>
            </a-col>
          </a-row>


          <a-row>
            <a-col :span="24">
              <a-form-model-item
                :label-col="formItemLayout.labelColTextarea"
                :wrapper-col="formItemLayout.wrapperColTextarea"
                label="面试评价"
                prop="interviewComment"
              >
                <a-textarea v-model="interview.interviewComment" placeholder="面试评价" :rows="5" :disabled="isDisabled" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <a-form-model-item
                :label-col="formItemLayout.labelColTextarea"
                :wrapper-col="formItemLayout.wrapperColTextarea"
                label="面试备注"
                prop="remarks"
              >
                <a-textarea v-model="interview.remarks" placeholder="面试备注" :rows="5" :disabled="isDisabled" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>

    import {API} from '@/api/base_api';
    import {getAction,postAction,putAction,deleteAction} from '@/api/manage'
    //布局占据的位数
    const formItemLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 12 },
        labelColTextarea: { span: 2 },
        wrapperColTextarea: { span: 22 },
    };

    //已占领的高度
    let occupyHeight = 230;

    export default {
        name: "Interview",
        data(){
            return{
                paneKey:1,
                BASE_API:null,
                //控件占一半位置
                widthLayout:{
                    width:'60%',
                },
                //table高度
                heightTable:0,
                //布局占据的位数
                formItemLayout,
                //是否有基本信息
                isExists:false,
                //控件是否能编辑
                isDisabled:true,
                //上传的文件
                uploadFile:{},
                //上传文件
                headers: {
                    authorization: 'authorization-text',
                },
                //默认上传的文件列表
                defaultFileList: [],
                interviewPostList:[{id:1,name:'大数据'},
                              {id:2,name:'前端'},
                              {id:3,name:'后端'}],
                //面试情况数据
                interview:{
                    id:null,
                    basicId:null,

                    interviewPostId:null,
                    interviewDate:null,
                    resume:null,
                    interviewComment:null,
                    remarks:null,
                },
                rules:{
                    interviewPostId:[
                        { required: true, message: "面试岗位不能为空", trigger: 'blur' },
                    ],
                    interviewDate:[
                        { required: true, message: "面试时间不能为空", trigger: 'change' },
                    ],
                }
            }
        },
        // mounted() {
        //     //获取高度值
        //     window.onresize = () => {
        //         this.heightTable = document.documentElement.clientHeight-occupyHeight + ("px");
        //         console.log("interview = >tableHeight = ",this.heightTable)
        //     }
        // },
        methods: {
            //加载高度
            initLoadHeight(height){
                this.heightTable = height-(occupyHeight) +("px");
            },
            initBasicId(basicId){
                this.interview = {};
                this.defaultFileList.length = 0;
                //校验清除
                this.$refs.interview.resetFields()
                if(basicId>0){
                    //已有基本信息，可以添加信息
                    this.isExists=true;
                    this.interview.basicId = basicId;
                }else{
                    //还没有基本信息 ，无法添加其他信息
                    this.isExists=false;
                }
                this.getInfo();
            },
            //获取父组件中isDisable
            isDisable(isDisabled){
                this.isDisabled = isDisabled;
            },
            //日期
            onChange(date, dateString) {
                console.log(date, dateString);
            },
            //上传文件前先判断条件是否满足
            beforeUpload(file) {
                if(!this.isExists){
                    this.$message.info('不存在基本信息，请先填完基本信息保存后再填写！');
                    return ;
                }
                let str = file.name.split('.');
                //.rar .zip .doc .pdf
                const isExcel = str[str.length-1] === 'doc' ||
                      str[str.length-1] === 'docx'||
                      str[str.length-1] === 'rar'||
                      str[str.length-1] === 'zip'||
                      str[str.length-1] === 'pdf';
                if (!isExcel) {
                    this.$message.error('请上传.rar .zip .doc .pdf格式文件！');
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('文件不得超过2Mb!');
                }
                return isExcel && isLt2M;
            },
            //上传简历
            handleChange(info) {
                if (info.file.status !== 'uploading') {
                    console.log("文件"+info.file, info.fileList);
                    this.interview.resume = null;
                }
                if (info.file.status === 'done') {
                    this.$message.success(`${info.file.name} 上传成功！`);
                    this.interview.resume = this.BASE_API + info.file.response.message;
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} 上传失败`);
                }
            },
            reset(){
                this.interview.interviewPostId=null;
                this.interview.interviewDate=null;
                this.interview.resume=null;
                this.interview.interviewComment=null;
                this.interview.remarks=null;
            },
            //返回list页面
            back(){
                // this.$router.push("/internship/list")
                this.reset();
                this.$emit('router-pane',this.paneKey,0)
            },
            //保存数据
            save(formName){
                if(!this.isExists){
                    this.$message.info('不存在基本信息，请先填完基本信息保存后再填写！');
                    return;
                }
                this.$refs[formName].validate(valid => {
                    console.log("保存 = 》 ",this.interview);
                    let that = this;
                    if (valid) {
                        //保存   交给后端判断是保存还是更新，如果有id就是更新，没有就是保存
                        this.$confirm({
                            title: '保存',
                            content: h => '是否提交保存？',
                            onOk() {
                                postAction("/interview/interview/save",that.interview).then(res=>{
                                    that.$message.success(
                                        '保存成功!',
                                        10,
                                    );
                                    that.getInfo();
                                })
                            },
                            onCancel() {
                                console.log('Cancel');
                            },
                        });

                    } else {
                        this.$message.info('信息填写不完整，请填写完成再提交！');
                        return false;
                    }
                });
            },
            //获取面试情况
            getInfo(){
                if(this.isExists){
                    let that = this;
                    getAction("/interview/interview/info/"+this.interview.basicId).then(res=>{
                        console.log("面试情况信息",res)
                        if(res.result!=null){
                            //回响日期数据
                            let date = res.result.interviewDate.split("-");
                            res.result.interviewDate = that.$moment(new Date(date[0],(date[1]-1),date[2]));
                            this.interview = res.result;

                            //回响上传的个人简历
                            if(this.interview.resume!=null){
                                let name = this.interview.resume.substring(this.interview.resume.lastIndexOf("/")+1);
                                //截断后面的元素
                                this.defaultFileList.length = 0;
                                this.defaultFileList.push({
                                    uid: this.interview.basicId,
                                    name: name,
                                    status: 'done',
                                    response: 'Server Error 500', // custom error message to show
                                    url: this.interview.resume
                                });
                            }
                        }
                    }).catch(error=>{
                        console.log("获取面试情况异常",error)
                    })
                }
            },
        },
        created() {
            this.BASE_API = API();
        }
    }
</script>

<style scoped>


</style>